<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02- component 组件的分类</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <my-world></my-world>
    <hr>
    <hello></hello>

</div>
<script>
    /**
     * 全局组件，可以在所有vue实例中使用
     */
    Vue.component('my-world', {
        template: '<h1>你好，世界 全局组件 component: my-world  {{name}}</h1>',
        data() {
            return {
                name: 'centos'
            }
        }
    });

    /**
     * 局部组件，只能在当前vue实例中使用
     */
    let vm = new Vue({ // 这里的vm也是一个组件，称为根组件Root
        el: "#app",
        data() {
            return {name: 'tom'}
        },
        components: {
            // 局部组件
            'hello': {
                template: '<h3>局部组件 hello age: {{age}}</h3>',
                data() {
                    return {
                        age: 1201
                    }
                }
            }
        }

    })
</script>
</body>
</html>